<template>
  <div class="main">
    <div class="top">
      <div class="left">
        <div class="searchInput" v-if="!isSearchHide">
          <input v-model="keyword"
                 @keyup.enter="search"
                 type="text"
                 placeholder="e.g Suid alphaherpesvirus 1"/>
          <div class="btn-default" @click="search">
            Search
          </div>
        </div>

        <div class="overview">
          <div class="list">
            <div class="title">Quick browse by Viral Group:</div>
            <div class="quick">
              <div class="item topItem" v-for="(item, idx) in rnaList" :key="idx" @click="rnaTypeClick(item)">
                <div>{{item.name}}</div>
                <img class="img"
                     :src="require('@/assets/image/browse/virus/' + item.name + '.png')">
<!--                <img width="140px" :src="require(`@/assets/image/rna/${item.name}.jpg`)"/>-->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-carousel trigger="click" height="650px">
          <el-carousel-item class="carousel">
            <div class="carouselItem">
              <h1 class="title"> {{homeInfo.welcomeTitle}} </h1>
              <div class="content">vlncRNAbase is a collection of viral RNA products derived from data mining of TGS data
                and NCBI RefSeq/GenBank database in different hosts. The database contains {{overview.page1.lncRNA}} virus-encoded lncRNAs (vlncRNAs)
              </div>
            </div>
          </el-carousel-item>

          <el-carousel-item class="carousel">
            <div class="carouselItem">
              <h1 class="title"> {{overview.page1.fnum}} virus family！</h1>
              <div class="content">{{overview.page1.snum}} virus species and {{overview.page1.fnum}} virus family!</div>
            </div>
          </el-carousel-item>

          <el-carousel-item class="carousel">
            <div class="carouselItem">
              <h1 class="title">{{overview.page1.hnum}} hosts ！</h1>
              <div class="content">{{page2Desc}}!</div>
            </div>
          </el-carousel-item>

          <el-carousel-item class="carousel">
            <div class="carouselItem">
              <h1 class="title">{{overview.page1.sanum}} TGS samples and {{overview.page1.pnum}} bioprojects！</h1>
              <div class="content">{{notNullToZero(overview.page3.lncRNA)}} samples for lncRNA</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="middle">
      <div>
        <div class="headWarp">
          <div>Representative viruses</div>
          <div class="line"></div>
        </div>
        <div class="rna-warp">
          <div class="item vhWarp" v-for="(item, idx) in viruses" :key="idx" @click="virusesClick(item)">
            <div class="imgWarp">
              <img width="130px" :src="require(`@/assets/image/virus/${item.name}.jpg`)"/>
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
      <div>
        <div class="headWarp">
          <div>Representative hosts</div>
          <div class="line"></div>
        </div>
        <div class="rna-warp">
          <div class="item" v-for="(item, idx) in host" :key="idx" @click="hostClick(item)">
            <div style="width: 130px;height: 130px;display: flex;align-items: center;">
              <img :src="require(`@/assets/image/host/${item.name}.png`)"/>
            </div>
            <div class="oblq">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="fullWidth">
      <div class="fixedWidth">
        <div class="headWarp">
          <div>Latest news</div>
          <div class="line" style="width: 50px"></div>
<!--          <div style="margin-top: 20px;color: #a3a3a2;font-size: 16px">News of VRPbase</div>-->
        </div>

        <div class="news">
          <div class="cell" v-for="(item, idx) in newList" :key="idx">
            <div class="top">
              <i class="el-icon-tickets"></i>
              <div class="time">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
            </div>

            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Moment from 'moment'
import {getInfo, list, overviews} from "@/api/home";
import { parseTime } from '../utils/tool'
import {isEmpty} from "@/utils/validate"

export default {
  name: "home",
  filters: {
    formatDate(e) {
      return Moment(e - 0).format('YYYY-MM-DD')
    }
  },
  props: {},
  data() {
    return {
      newList: [],
      homeInfo: {
        content: '',
        welcomeTitle: ''
      },
      rnaList: [{
        name: 'ssRNA',
      }, {
        name: 'dsDNA'
      }, {
        name: 'dsDNA-RT'
      }],
      // rnaList: [{name: "mRNA"},{name: "lncRNA"},{name: "circRNA"},{name: "sRNA"}],
      keyword: '',
      isSearchHide: false,
      info: {},
      groupQuery: {
        viralFamily: null,
        virusSpecies: null,
        host: null
      },
      viruses: [{name: "HHV-5"}, {name: "BoHV-1"}, {name: "SARS-CoV-2"}, {name: "ASFV"}, {name: "IAV"}, {name: "PRRSV"}],
      host: [{name: "Homo sapiens"}, {name: "Sus scrofa"},{name: "Chlorocebus sabaeus"}, {name: "Gallus gallus"}, {name: "Bos taurus"}, {name: "Spodoptera frugiperda"}],
      overview: {
        page1: {},
        page2: {},
        page3: {}
      }
    }
  },
  computed: {
    page2Desc() {
      let page2 = this.overview.page2
      let arr = []
      for (let prop in page2) {
        arr.push(`${page2[prop]} ${prop} species`)
      }
      return arr.join(", ")
    }
  },
  created() {
    this.getHome()
    this.getNewList()
  },
  mounted() {
    this.getOverviews()
  },
  methods: {
    notNullToZero(n) {
      if (isEmpty(n)) {
        return 0
      }
      return n-0
    },
    parseTime(d, f) {
      return parseTime(d, f)
    },
    async getOverviews() {
      const res = await overviews()
      this.overview = res.data
    },
    async getHome() {
      const res = await getInfo()
      if (res) {
        this.homeInfo = res.data
      }
    },
    async getNewList() {
      const res = await list()
      if (res) {
        this.newList = res.data.sort((a, b) => (b.date - 0) - (a.date - 0))
      }
    },
    rnaTypeClick(item) {
        this.$router.push({path: '/overview', query: { viralGroup: item.name}})
    },
    search() {
      if (this.keyword.trim()) {
        this.$router.push({path: '/viruslSearch', query: {keyword: this.keyword}})
      }
    },
    goOrgan(e) {
      this.$router.push({path: '/organ', query: {name: e}});
    },
    goVirus(e) {
      this.$router.push({path: '/virus', query: {name: e}});
    },
    virusesClick(item) {
      this.$router.push({path: '/viruslSearch', query: {
          abbreviation: item.name
        }})
    },
    hostClick(item) {
      this.$router.push({path: '/viruslSearch', query: {
          host: item.name
        }})
    }
  }
}
</script>

<style lang="stylus" scoped>
.main {
  //width 1170px
  //margin-top 20px
  //padding-top 30px

  .top {
    width 100%
    display flex
    justify-content space-between
    font-family: Times New Roman;
  }

  .middle {
    width 1170px
    margin 0 auto
  }

  .left {
    width 45%
    padding: 130px 60px 0 60px
    background-color rgba(189, 189, 189, 0.05)
    min-width 432px
    //display flex
    //flex-direction column
    //justify-content center
  }

  .right {
    width 65%
    margin 0
    background: url(../assets/image/home/scrollBack.png) scroll no-repeat center center;
    background-size: cover;
    height 650px
  }

  .carousel {
    display flex
    align-items center
    //padding-top 50px
    .carouselItem {
      width 100%
      color: #0a2458;
      font-family: Times New Roman;
      background-color rgba(122, 122, 122, 0.08)
      padding 70px 80px

      .title {
        font-weight 700
        font-size 46px
        margin-bottom 40px
      }

      .content {
        font-size 19px
        line-height 1.7
        color: rgba(10, 36, 88, 0.76);
      }
    }
  }


  .card {
    color: #0a2458;
    font-family: Times New Roman;
    margin-bottom 60px
    .title {
      padding 15px
      border 1px solid #11427DFF
      background #9fabd4
      font-weight 700
      font-size 28px
    }
    .body {
      border 1px solid #11427DFF
      border-top none
      padding 15px
      line-height 1.2em
    }
  }

  .quick {
    display flex
    flex-direction column
    align-items center
    padding 15px

    .item {
      cursor pointer
      display flex
      align-items center
      margin-bottom 40px

      div {
        font-size 18px
        font-weight 600
        font-family Times New Roman
        margin-right 40px
      }

      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        max-width 180px
      }
    }
  }

  .rna-warp {
    display flex
    justify-content: space-evenly;
    padding 15px
    flex-wrap wrap
    .item {
      cursor pointer
      display flex
      flex-direction column
      align-items center
      div {
        font-size 18px
        font-weight 600
        margin-bottom 10px
        font-family Times New Roman
      }
    }
    .topItem {
      width 50%
      margin-bottom 40px
    }
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      max-width 180px
    }
  }

  .vhWarp {
    justify-content  space-between
    .imgWarp {
      width 130px
      height 130px
    }
  }

  .oblq {
    font-style: oblique;
    font-family Times New Roman
  }

  .searchInput {
    height 42px
    display flex

    input {
      flex 1
      height 100%
      line-height 42px
      border 2px solid #11427DFF
      outline 0
      border-radius 7px
      padding 0 20px
    }

    .btn-default {
      margin-left 25px
      width 100px
      line-height 40px
      text-align center
      border-radius 7px
      font-size 16px
      background #11427DFF
      color #fff
      outline 0
      cursor pointer
    }
  }

  .overview {
    margin-top 60px
    .title {
      font-size 25px
      font-weight 600
      color #0a2458
      margin-bottom 30px
    }
  }


  .fullWidth {
    width 100%
    padding 5px 0 30px 0
    background-color rgba(189, 189, 189, 0.05)
    border-top 1px solid rgba(189, 189, 189, 0.08)
    border-bottom 1px solid rgba(189, 189, 189, 0.08)
  }

  .fixedWidth {
    width 1170px
    margin 0 auto
  }

  .news {
    display flex
    justify-content: space-evenly;
    font-family Times New Roman
    .cell {
      flex 1
      padding 0 15px
      p {
        margin-top 15px
        color #a5a5a5
        line-height 1.5
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 4; /** 显示的行数 **/
        overflow: hidden;  /** 隐藏超出的内容 **/
      }
      .top {
        display flex
        justify-content flex-start
        align-items center
        color #0064bc

        .time {
          margin-top 4px
          font-size 18px
          font-weight 600
          color: #0064bc
          margin-left 10px
        }
        i {
          color: #fff;
          font-size 18px
          font-weight 600
          padding 8px
          border-radius 2px
          background-color #0064bc
        }
      }
    }
  }

  .headWarp {
    display flex
    flex-direction column
    align-items center
    margin 80px 60px 60px 60px
    font-weight 900
    font-size 25px
    color #0a2458
    text-align center
    font-family: Times New Roman;

    .line {
      margin-top 10px
      width 200px
      height 1px
      background-color #0a2458
    }
  }

  .groupSearch {
    display flex
    justify-content: space-evenly;
    align-items flex-end

    border: 3px solid #0a2458;
    border-radius: 16px;
    width: 100%;
    padding: 42px 50px;

    .item-til {
      font-weight 900
      font-size 16px
      color #0a2458
      font-family: Times New Roman;
      margin-bottom 10px
    }

    .input {
      width: 250px;
      padding: 16.5px 14px 16.5px 13px;
      border-radius: 8px;
      background-color: #e0e5ef;
      color: #0a2458;
      border: 1px solid #e0e5ef;
      transition: .2s ease;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    .input:focus {
      background-color: #fffbec;
      outline: 0;
    }
    input::placeholder {
      color: #4e5d82;
    }
  }

  .g-search {
    color #fff
    height 53px
    padding 0 20px
    background-color: #11427DFF;
    border-color: #11427DFF;
    border-radius 7px
    font-weight 900
    font-size 16px
    font-family: Times New Roman;
    cursor pointer
  }

  .el-button--primary /deep/{
    height 52px
    background-color: #11427DFF;
    border-color: #11427DFF;
    border-radius 7px
    span , i{
      font-weight 700
    }
    i {
      margin-left  5px
    }
    margin-left 15px
  }

}
</style>
